<template>
  <div class="bg">
    <div>
      <el-input v-model="form.paperName" style="float: center; width: 200px" placeholder="请输入试卷名称"></el-input>
      <el-button @click="submitForm" style="float: center; margin: 5px">查询</el-button>
      <el-button style="float: right" @click="
        dialogFormVisible = true
      clearForm()
        ">新建</el-button>

      <el-dialog title="新建试卷" :visible.sync="dialogFormVisible">
        <el-form :model="dialogform">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="dialogform.paperName" placeholder="输入名称">
            </el-input>
          </el-form-item>
          <el-form-item label="时长(min)" :label-width="formLabelWidth">
            <el-select v-model="dialogform.totalTime" placeholder="考试时长">
              <el-option label="60" value="3600"></el-option>
              <el-option label="90" value="5400"></el-option>
              <el-option label="120" value="7200"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="`题目${index + 1}`" :label-width="formLabelWidth" v-for="(ques, index) in questions"
            :key="index">
            <span @click="
        dialogFormVisible4 = true
      handleCheckPaper(index)
        ">{{ ques.content }}</span>
          </el-form-item>
          <el-form-item label="设置" :label-width="formLabelWidth">
            <el-button @click="addSelect">添加题目</el-button>
            <el-button @click="removeSelect(index)">删除</el-button>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="
        dialogFormVisible = false
      submitPaper()
        ">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="试卷详情" :visible.sync="dialogFormVisible2">
        <el-form :model="dialogform2">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-if="flag" v-model="dialogform2.paperName" autocomplete="off" :disabled="flag"></el-input>
            <el-input v-else v-model="dialogform2.paperName" placeholder="输入名称">
            </el-input>
          </el-form-item>
          <el-form-item label="时长(min)" :label-width="formLabelWidth">
            <el-input v-if="flag" v-model="dialogform2.totalTime" autocomplete="off" :disabled="flag"></el-input>
            <el-select v-else v-model="dialogform2.totalTime" placeholder="考试时长">
              <el-option label="60" value="3600"></el-option>
              <el-option label="90" value="5400"></el-option>
              <el-option label="120" value="7200"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="`题目${index + 1}`" :label-width="formLabelWidth" v-for="(ques, index) in questions"
            :key="index">
            <span v-if="flag" @click="handleCheckPaper(index)">{{
        ques.content
      }}</span>
            <span v-else @click="
      dialogFormVisible4 = true
      handleCheckPaper(index)
        ">{{ ques.content }}</span>
          </el-form-item>

          <el-form-item label="设置" :label-width="formLabelWidth">
            <el-input v-if="flag" autocomplete="off" :disabled="flag"></el-input>
            <el-button v-if="!flag" @click="addSelect">添加题目</el-button>
            <el-button v-if="!flag" @click="removeSelect(index)">删除</el-button>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="
        dialogFormVisible2 = false
      handleChange()
        ">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="题目详情" :visible.sync="dialogFormVisible4">
        <el-form :model="dialogform4">
          <el-form-item label="种类" :label-width="formLabelWidth">
            <el-input v-if="flag" v-model="dialogform4.category" autocomplete="off" :disabled="flag"></el-input>
            <el-select v-else v-model="dialogform4.category" placeholder="选择种类">
              <el-option label="接诊" value="A"></el-option>
              <el-option label="检验" value="B"></el-option>
              <el-option label="诊断" value="C"></el-option>
              <el-option label="治疗" value="D"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题干" :label-width="formLabelWidth">
            <el-input v-model="dialogform4.content" autocomplete="off" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="选项A" :label-width="formLabelWidth">
            <el-input v-model="dialogform4.sectionA" autocomplete="off" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="选项B" :label-width="formLabelWidth">
            <el-input v-model="dialogform4.sectionB" autocomplete="off" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="选项C" :label-width="formLabelWidth">
            <el-input v-model="dialogform4.sectionC" autocomplete="off" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="选项D" :label-width="formLabelWidth">
            <el-input v-model="dialogform4.sectionD" autocomplete="off" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="答案" :label-width="formLabelWidth">
            <el-input v-if="flag" v-model="dialogform4.answer" autocomplete="off" :disabled="flag"></el-input>
            <el-select v-else v-model="dialogform4.answer" placeholder="选择答案">
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
              <el-option label="C" value="C"></el-option>
              <el-option label="D" value="D"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible4 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible4 = false">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="题目列表" :visible.sync="dialogFormVisible3">
        <el-table :data="quesData" border stripe style="width: 100%">
          <el-table-column type="index" label="ID" width="180">
          </el-table-column>
          <el-table-column prop="category" label="种类" width="180">
          </el-table-column>
          <el-table-column prop="content" label="题干"> </el-table-column>
          <el-table-column prop="oper" label="操作">
            <template v-slot:default="scope">
              <el-button type="primary" plain size="mini" @click="
        dialogFormVisible4 = true
      flag = true
      handleCheck(scope.$index)
        ">
                查看信息
              </el-button>
              <el-button type="primary" plain size="mini" @click="handleChoose(scope.$index)">
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>

    <div>
      <el-table :data="paperData" border stripe style="width: 100%">
        <el-table-column type="index" label="ID" width="180"> </el-table-column>
        <el-table-column prop="paperName" label="试卷名称" width="180">
        </el-table-column>
        <el-table-column prop="totalTime" label="考试时长(min)" width="180">
        </el-table-column>
        <el-table-column prop="oper" label="操作">
          <template v-slot:default="scope">
            <el-button type="primary" plain size="mini" @click="
        dialogFormVisible2 = true
      flag = true
      handleSee(scope.$index)
        ">
              查看试卷
            </el-button>
            <el-button type="danger" @click="handleDelete(scope.$index)" plain size="mini">
              删除试卷
            </el-button>
            <el-button type="success" plain size="mini" @click="
        dialogFormVisible2 = true
      flag = false
      handleSee(scope.$index)
        ">
              修改试卷
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getQues } from '../../api/anindex'
import { newPaper } from '../../api/anindex'
import { getPaper } from '../../api/anindex'
import { deletePaper } from '../../api/anindex'
import { searchPaper } from '../../api/anindex'
import { updatePaper } from '../../api/anindex'
export default {
  name: 'paper',
  data() {
    return {
      form: {
        pageNum: '0',
        pageSize: '1000',
        paperName: '',
      },
      Id: {
        paperId: '',
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      flag: true,
      dialogform: {
        paperName: '',
        questions: [],
        totalTime: '',
        totalScore: '100',
      },
      dialogform2: {
        paperId: '',
        paperName: '',
        questions: [],
        totalTime: '',
        totalScore: '100',
      },
      dialogform4: {
        content: '',
        sectionA: '',
        sectionB: '',
        sectionC: '',
        sectionD: '',
        category: '',
        answer: '',
      },
      quesform: {
        content: '',
        sectionA: '',
        sectionB: '',
        sectionC: '',
        sectionD: '',
        category: '',
        answer: '',
      },
      pageForm: {
        pageNum: '0',
        pageSize: '1000',
        paperName: '',
      },
      paperForm: {
        pageNum: '0',
        pageSize: '1000',
      },
      formLabelWidth: '120px',
      paperData: [],
      quesData: [],
      questions: [],
    }
  },
  created() {
    this.fetchQuestions()
    this.fetchPapers()
  },
  methods: {
    handleCheckPaper(index) {
      this.dialogform4 = this.questions[index]
    },
    handleSee(index) {
      this.dialogform2 = this.paperData[index]
      this.questions = this.paperData[index].questions
      console.log(this.dialogform2)
    },
    clearForm() {
      this.questions = []
      this.dialogform = {
        paperName: '',
        questions: [],
        totalTime: '',
        totalScore: '100',
      }
    },
    submitPaper() {
      this.dialogform.questions = this.questions
      console.log(this.dialogform)
      if(this.dialogform.questions.length==0) this.$message.error('你还未设置题目！')
      else{
      newPaper(this.dialogform).then((res) => {
        if (res.data.code == '200') {
          this.$message.success('试卷创建成功！')
          this.dialogFormVisible = false
          this.fetchPapers()
        }
      })}
    },
    fetchPapers() {
      searchPaper(this.paperForm).then((res) => {
        this.paperData = res.data.data
      })
    },
    addSelect() {
      this.dialogFormVisible3 = true
    },
    handleDelete(index) {
      this.Id.paperId = this.paperData[index].paperId
      console.log(this.paperData[index])
      deletePaper(this.Id).then((res) => {
        if (res.data.code == '200') {
          this.paperData.splice(index, 1)
          this.$message.success('删除成功！')
        }
      })
    },
    handleChange() {
      if(this.dialogform2.totalTime==60){this.dialogform2.totalTime="3600"};
      if(this.dialogform2.totalTime==90){this.dialogform2.totalTime="5400"};
      if(this.dialogform2.totalTime==120){this.dialogform2.totalTime="7200"};
      updatePaper(this.dialogform2).then((res) => {
        if (res.data.code == '200') {
          this.fetchPapers();
          this.$message.success('更新成功')
        }
      })
     
    },
    handleCheck(index) {
      this.dialogform4 = this.quesData[index]
    },
    handleChoose(index) {
      this.$message.success('选择成功')
      this.quesform = this.quesData[index]
      this.questions.push(this.quesform)
      console.log(this.questions)
    },
    removeSelect(index) {
      this.questions.splice(index, 1)
    },
    submitForm() {
      searchPaper(this.form).then((res) => {
        if (res.data.code == '200') {
          this.paperData = res.data.data
          this.$message.success('刷新成功！')
        }
      })
    },
    fetchQuestions() {
      getQues(this.pageForm).then((res) => {
        this.quesData = res.data.data
      })
    },
  },
}
</script>
<style scoped>
.bg {
  color: blue;
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: black !important;
}
</style>
